<template>
	<div class="manage_page fillcontain" style="background:#fafafa">
		<head-top></head-top>
		<!-- <mapComponent v-model="showMapComponent" v-on:cancel="cancelMap" v-on:map-confirm="confirmMap"></mapComponent> -->
		<el-row style="height: calc(100% - 45px - 2.7px)">
			<el-col :span="4" style="min-height: 105.5%; background-color: #324057;">
				<el-menu  :class="`${classObject} cxxscrollbar`"  style="background-color: rgb(50, 64, 87);position: fixed;top: 45px;height:100vh;z-index: 999;width:16%;overflow-y:auto" theme="dark" router :unique-opened="true" id="nav" class="rg-table-box">
					<el-submenu v-for="(item,i) in sanmenu" :key="i" :index="String(i)">
						<template slot="title" style="color: #bfcbd9;">
							<i class="el-icon-document"></i>
							<span style="color: #bfcbd9" @click="getscroll(String(i))">{{item.resourceName}}</span>
						</template>
						<el-menu-item v-for="(item1,i) in item.children" :key="i"
							@click="changeClass(item.resourceName);handleSelect(item1.resourceUrl,item1.resourceName)"
							:class="{ 'active-class': nowIndex === item1.resourceName}">
							<span @mouseover="changeTabone(item1.resourceName)">{{item1.resourceName}}</span>
						</el-menu-item>
					</el-submenu>
					<!-- <el-tree
            :data="dataone"
            :props="defaultProps"
            @node-click="handleNodeClick"
            style=" background-color: rgb(50, 64, 87) !important;color:#fff"
          ></el-tree>-->
				</el-menu>
			</el-col>
			<div class="tag"
				style="height: 34px;padding-top: 20px;margin-top: 2.1%;border-bottom: 1px solid #e6e6e6;margin-bottom: 15px;    background: #fafafa;">
				<title-top></title-top>
			</div>
			<el-col :span="20" :class="classObject" style="height: 90%; padding: 1px 20px;left: 13%;">
				<div name="fade" mode="out-in" style="width:100%;height:100%">
					<keep-alive>
						<router-view v-if=$route.meta.keepAlive></router-view>
					</keep-alive>
					<router-view v-if="!$route.meta.keepAlive"></router-view>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import qs from "qs";
	import headTop from "@/components/headTop";
	import titleTop from "@/components/titleTop";
	import mapComponent from "@/components/mapComponent";
	import {
		getslider,
		getmenus
	} from "@/api/manage";
	import Bus from "@/utils/bus.js";
	export default {
		data() {
			return {
				classObject: [{
					'classA': true,
					'classB': false,
					'classC': false,
					'classD': false,
					'classE': false
				}],
				dataone: [],
				defaultProps: {
					children: "children",
					label: "resourceName"
				},
				flag3: false,
				flag2: false,
				arr: [],
				data: "",
				appId: "",
				moduleId: "",
				sanmenu: [],
				userId: "",
				clicked: "",
				nowIndex: "",
				Levelonename: "",
				Leveltwonamelist: [],
				Levelonenamelist: [],
				breadcrumbItems: "角色管理",
				keyValue: "",
				keyValuetwo: "",
				records: []
			};
		},
		computed: {
			key() {
				return this.$route.path + Math.random();
			}
		},
		//   watch: {
		//     showModal: function(newValue) {
		//       if (newValue) {
		//         this.init();
		//       }
		//     }
		//   },
		mounted() {
			//  window.addEventListener('scroll',function(){

			//     console.log(document.documentElement.scrollTop);//代表目前滚动条和最上方的距离多长
			//     console.log(document.documentElement.scrollHeight);//代表整个滚动条多长
			//     console.log(document.documentElement.clientHeight);
			//     console.log(document.documentElement.scrollHeight-document.documentElement.scrollTop-document.documentElement.clientHeight);
			// })
			this.getBrowser();
			console.log(this.getBrowser());
			// var that = this;
			// //设置超时退出
			// var lastTime = new Date().getTime();
			// var currentTime = new Date().getTime();
			// var timeOut = 10 * 60 * 1000; //设置超时时间： 10分

			// $(function() {
			//   /* 鼠标移动事件 */
			//   $(document).mouseover(function() {
			//     lastTime = new Date().getTime(); //更新操作时间
			//   });
			// });

			// function testTime() {
			//   currentTime = new Date().getTime(); //更新当前时间
			//   if (currentTime - lastTime > timeOut) {
			//     //判断是否超时
			//     console.log("超时");
			//     localStorage.removeItem("token");
			//     that.$router.push({
			//       path: "/login"
			//     });
			//   }
			// }
			// this.handleSelect(item1[0].resourceUrl, item1[0].resourceName);
			// this.$root.PAGE_TITLE = "用户管理";

			// this.handleSelect();
			this.$router.push("/homepage");

			Bus.$on("val", data => {
				//   console.log(data, "kks");
				this.appId = data;
			});
			Bus.$on("valone", data => {
				//  console.log(data, "kky");
				this.moduleId = data;
				//    console.log(this.moduleId, "jj");
				//   this.getsliderone();
			});

			// this.moduleId ? (this.moduleId = data) : (this.moduleId = "MP000000002");

			this.getsliderone();
			this._getmenus();
		},
		components: {
			headTop,
			titleTop
		},
		methods: {
			getscroll(v) {
				console.log(v, "kki")
				//   window.scrollTo(0,0);
				//   const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				//   const nav = document.getElementById('nav')

				//     nav.scrollTop = nav.scrollHeight;
				// console.log(nav.scrollHeight,"popoe")
				//         this.$nextTick(function() {
				//   let nav = document.getElementById('nav');
				//   nav.scrollTop = nav.scrollHeight-200;
				// })
				// console.log(nav.scrollHeight,"lll")
				//          console.log(nav.scrollTop,"kk");//代表目前滚动条和最上方的距离多长
				//   if (scrollTop >= 0 && scrollTop < 171) {
				//     nav.style.bottom = '0px'
				//   } else {
				//     nav.style.top = scrollTop - 171 + 'px'
				//   }


			},
			getBrowser() {
				var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
				var isOpera = userAgent.indexOf("Opera") > -1;
				//判断是否Opera浏览器
				if (isOpera) {
					return "Opera"
				};
				//判断是否Firefox浏览器
				if (userAgent.indexOf("Firefox") > -1) {
					this.classObject[0].classA = false, this.classObject[0].classB = true, this.classObject[0].classC =
						false;
					return "FF";
				}
				//判断是否chorme浏览器
				if (userAgent.indexOf("Chrome") > -1) {
					this.classObject[0].classA = true, this.classObject[0].classB = false, this.classObject[0].classC =
						false;
					return "Chrome";
				}
				//判断是否Safari浏览器
				if (userAgent.indexOf("Safari") > -1) {
					return "Safari";
				}
				//判断是否IE浏览器
				if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
					this.classObject[0].classA = false, this.classObject[0].classB = false, this.classObject[0].classC =
						true;
					return "IE";
				}
				//判断是否Edge浏览器
				if (userAgent.indexOf("Trident") > -1) {
					this.classObject[0].classA = false, this.classObject[0].classB = false, this.classObject[0].classC =
						true;
					return "Edge";
				};
			},
			handleNodeClick(data) {
				this.$router.push(data.resourceUrl);
				if (data.resourceUrl) {
					this.$root.PAGE_TITLE = data.resourceName;
				}
			},
			changeTabone(index) {
				this.nowIndex = index;
			},
			changeTab(index) {
				this.clicked = index;
			},
			changeClass(index) {
				console.log("pppooo");
				this.keyValuetwo = index;
				Bus.$emit("valthree", this.keyValuetwo);
			},
			changeClassone(index) {
				this.nowIndex = index;
			},
			_getmenus() {
				getmenus().then(res => {});
			},
			handleSelect(key, keyone) {
				this.keyValue = keyone;
				Bus.$emit("valtwo", this.keyValue);
				console.log(key, keyone, "pp");
				this.$router.push(key);
			},
			handleSelectone(keyone) {
				//   console.logconsole.log(keyone, "ppppjjjjfff");
			},
			getsliderone() {
				this.userId = localStorage.getItem("userId");
				//    console.log(this.userId, "leige");
				let data = {};

				getslider(data).then(res => {
					this.records = res.records;
					var arr = res.records;
					this.sanmenu = res.records;
					this.dataone = res.records;
				});
			}
		}
	};
</script>


<style lang="less" scoped>
	@import "../../style/mixin";
	@import "../../style/transtion";
	
	.cxxscrollbar::-webkit-scrollbar {
		display: none;
	}	
	
	.classA {
		overflow: scroll;
	}

	.classB {
		overflow: -moz-scrollbars-none;
	}

	.classC {
		-ms-overflow-style: none;
	}

	.el-menu {
		background-color: none;
		border-right:none
	}

	.el-submenu__title {
		color: #fff;
	}

	.active-class {
		background-color: #282828 !important;
	}

	.el-menu-item.is-active {
		color: rgb(191, 203, 217);
		background-color: #1f2d3d;
	}

	::-webkit-scrollbar {
		width: 0px;
		height: 0px;
		background-color: #f5f5f5;
	}

	.el-submenu__title:hover {
		// background-color: #000;
		//   border-left: 5px #de1717 solid;
	}

	.el-submenu__title:focus,
	.el-submenu__title:hover {
		outline: 0;
		// background-color: #000;
		//   border-left: 5px #de1717 solid;
	}

	.bor {
		background-color: #009b8b !important;
		color: #fff;
		cursor: pointer;
	}

	.el-tree-node__content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		background-color: rgba(255, 255, 255, 0.938) !important;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 57px;
		cursor: pointer;
		color: #fff;
	}

	.el-tree-node:focus>.el-tree-node__content {
		background-color: rgb(245, 246, 248) !important;
	}

	.el-tree-node__content:hover {
		background-color: rgb(245, 246, 248) !important;
	}

	.rg-table-box::-webkit-scrollbar {
		/*整体样式*/
		width: 10px;
		// height: 2px;
	}

	.rg-table-box::-webkit-scrollbar-track {
		/*轨道*/
		// box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.938);
		background: #ededed;
		border-radius: 10px;
	}

	.rg-table-box::-webkit-scrollbar-thumb {
		/*滚动条小方块*/
		border-radius: 10px;
		background: #fff;
		background-image: -webkit-linear-gradient(45deg,
				rgba(255, 255, 255, 0.938) 25%,
				transparent 25%,
				transparent 50%,
				rgba(255, 255, 255, 0.952) 50%,
				rgba(255, 255, 255, 0.925) 75%,
				transparent 75%,
				transparent);
	}
</style>
